#{extends 'main.html' /}
#{set title:messages.get('user') /}

<style>
.userInfoContainer {
	border-radius: 5px;
	padding: 5px;
	border: 1px solid #4297D7;
	font-family: 'Helvetica', 'Arial', 'Sans';
	font-size: 12px;
}

.requiredField {
	font-size: 10px;
    margin-left: 10px;
    color: #222222;
}

.patientValue {
	float: left;
	margin-bottom: 4px;
    padding: 2px 10px;
}

.patientValue input {
 	width: 300px;
    font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
    margin: 0px;
}

.patientValue select {
 	width: 300px;
    font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
    margin: 0px 0px 2px 0px;
}

.hasError {
	color: #C00;
}

.crudButtons {
    background: #EFEFEF;
    border-radius: 10px 10px 10px 10px;
    margin: 0px;
    padding: 10px;
    text-align: center;
    font-size: 12px !important;
    font-family: 'Helvetica','Arial','Sans';
}

.crudButtons input {
    background: #54BD06;
    border: medium none;
    border-radius: 8px 8px 8px 8px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    margin: 0 10px;
    padding: 2px 10px;
    font-family: 'Helvetica','Arial','Sans';
}
</style>

#{if flash.success}
   <div class="crudFlash flashSuccess">
       ${flash.success}
   </div>
#{/if}
#{if flash.error || error}
   <div class="crudFlash flashError">
       ${error ?: flash.error}
   </div>
#{/if}
<div>
	<h2 id="userInfoContainer">&{'user'}</h2>
	<div class="userInfoContainer">
	#{form action:@UserView.saveUser(), enctype:'multipart/form-data'}
		<input id="user_id" type="hidden" name="user.userId" value=${user.userId}>
		#{field 'user.lastName'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_lastName">&{'lastName'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'user.firstName'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_firstName">&{'firstName'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'user.middleName'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_middleName">&{'middleName'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'user.login'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_login">&{'login'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'user.password'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_password">&{'password'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		#{field 'user.post'}
		<div class="patientLabelValue">
			<div class="patientLabel">
				<label for="user_post">&{'post'}</label>
			</div>
			<div class="patientValue">
				<input type="text" id="${field.id}" name="${field.name}" value="${field.value}" class="${field.errorClass}">
				<span class="requiredField">&{'validation.required'}</span>
			</div>
		</div>
		#{/}
		<p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save'}">
            <input type="submit" name="_cancel" value="&{'crud.cancel'}">
        </p>
    #{/form}
	</div>
</div>
